<template>
  <div class="container">
    <Row :gutter="10">
      <h3 style="margin: 10px">主色</h3>
      <Col span="8" class="mt-5">
        <Card>
          <div class="primary">
            <p>Primary</p>
            <p>#2d8cf0</p>
          </div>
        </Card>
      </Col>
      <Col span="8" class="mt-5">
        <Card>
          <div class="light-primary">
            <p>Light Primary</p>
            <p>##5cadff</p>
          </div>
        </Card>
      </Col>
      <Col span="8" class="mt-5">
        <Card>
          <div class="dark-primary">
            <p>Dark Primary</p>
            <p>#2d8cf0</p>
          </div>
        </Card>
      </Col>
    </Row>


    <!--辅助色-->
    <Row :gutter="10">
      <h3 style="margin: 10px">辅助色</h3>
      <Col span="6" class="mt-5">
        <Card>
          <div class="info">
            <p>Info</p>
            <p>#2db7f5</p>
          </div>
        </Card>
      </Col>
      <Col span="6" class="mt-5">
        <Card>
          <div class="success">
            <p>Success</p>
            <p>#19be6b</p>
          </div>
        </Card>
      </Col>
      <Col span="6" class="mt-5">
        <Card>
          <div class="warning">
            <p>Warning</p>
            <p>#ff9900</p>
          </div>
        </Card>
      </Col>
      <Col span="6" class="mt-5">
        <Card>
          <div class="error">
            <p>Error</p>
            <p>#ed4014</p>
          </div>
        </Card>
      </Col>
    </Row>


    <!--辅助色-->
    <Row :gutter="10">
      <h3 style="margin: 10px">中性色</h3>
      <Col span="6" class="mt-5">
        <Card>
          <div class="title">
            <p>标题 Title</p>
            <p>#17233d</p>
          </div>
        </Card>
      </Col>
      <Col span="6" class="mt-5">
        <Card>
          <div class="content">
            <p>正文 Content</p>
            <p>#515a6e</p>
          </div>
        </Card>
      </Col>
      <Col span="6" class="mt-5">
        <Card>
          <div class="sub">
            <p>辅助/图标 Sub Color</p>
            <p>#808695</p>
          </div>
        </Card>
      </Col>
      <Col span="6" class="mt-5">
        <Card>
          <div class="disabled">
            <p>失效 Disabled</p>
            <p>#c5c8ce</p>
          </div>
        </Card>
      </Col>
      <Col span="6" class="mt-5">
        <Card>
          <div class="border">
            <p>边框 Border</p>
            <p>#dcdee2</p>
          </div>
        </Card>
      </Col>
      <Col span="6" class="mt-5">
        <Card>
          <div class="divider">
            <p>分割线 Divider</p>
            <p>#e8eaec</p>
          </div>
        </Card>
      </Col>
      <Col span="6" class="mt-5">
        <Card>
          <div class="background">
            <p>背景 Background</p>
            <p>#f8f8f9</p>
          </div>
        </Card>
      </Col>
    </Row>

  </div>
</template>

<script>
  export default {
    data(){
      return{

      }
    }
  }
</script>

<style scoped>
  .primary, .light-primary,.dark-primary,.info,.success,.warning,.error,.title,.content,.sub,.disabled,.border,.divider,.background{
    font-size: 14px;
    text-align: center;
    height: 60px;
    line-height: 30px;
    color: #fff;
  }
  .primary{
    background: #2d8cf0;
  }
  .light-primary{
    background: #5cadff;
  }
  .dark-primary{
    background: #2b85e4;
  }
  .info{
    background: #2db7f5;
  }
  .success{
    background: #19be6b;
  }
  .warning{
    background:#ff9900 ;
  }
  .error{
    background: #ed4014 ;
  }
  .title{
    background: #17233d;
  }
  .content{
    background: #515a6e;
  }
  .sub{
    background: #808695;
  }
  .disabled{
    background: #c5c8ce;
  }
  .border,.divider,.background{
    color: #666;
  }
  .border{
    background: #dcdee2;
  }
  .divider{
    background: #e8eaec;
  }
  .background{
    background: #f8f8f9;
  }

  .mt-5{
    margin: 5px 0;
  }
</style>
